<script>
import DialogMixin from "../DialogMixin";
import {ElementType} from "../../../modeling/TypeDefine";
import {wrapFramesDesignCommand} from "../../../command/WrapFramesDesignCommand";

export default {
  name: "WrapFramesTool",
  mixins: [DialogMixin],
  data() {
    return {
      params: {
        curveFace: {
          elements: [],
          message: "选择贴合曲面"
        },
        frameDatum: {
          elements: [],
          message: "选择框占位面"
        },
        sDatum: {
          elements: [],
          message: "选择包框开始面"
        },
        eDatum: {
          elements: [],
          message: "选择包框结束面"
        },
        trussDatums: {
          elements: [],
          message: "选择长桁占位面"
        },
        size: {
          frameWidth: 20,
          frameHeight: 90,
          trussWidth: 30,
          trussHeight: 30,
          amplifying: 1.035,
          course: "X轴正向",
          frameBorder: 5,
        }
      },
      queryListActiveMap: {
        sectionCurveFace: 1,
        sectionFrameDatum: 0,
        sectionSDatum: 0,
        sectionEDatum: 0,
        sectionTrussDatum: 0, // 一堆长桁面；正常包裹为90，长桁为60，存在特殊的区域，超过90
      },
      activeQueryName: "sectionCurveFace",
      isLoading: false,
      loadingText: "正在生成..."
    }
  },
  mounted() {
    wrapFramesDesignCommand.init(500, 500, 550, () => {
      wrapFramesDesignCommand.event.subscribeElementPickEvent(e => {
        if (!e || !e.element || !e.element.length) {
          return
        }
        let item = e.element[0].element;
        console.log(item, 245)
        switch (this.activeQueryName) {
          case "sectionCurveFace":
            if (item.type !== ElementType.FACE) {
              wrapFramesDesignCommand.eventBusAlertMsg("请选择曲面", "warning")
              break;
            }
            this.params.curveFace.elements = [];
            this.params.curveFace.elements.push(item);
            this.switchQuery("sectionFrameDatum");
            break;
          case "sectionFrameDatum":
            if (item.type !== ElementType.DATUMPLANE) {
              wrapFramesDesignCommand.eventBusAlertMsg("请选择基准面", "warning")
              break;
            }
            this.params.frameDatum.elements = [];
            this.params.frameDatum.elements.push(item);
            this.switchQuery("sectionSDatum");
            break;
          case "sectionSDatum":
            if (item.type !== ElementType.DATUMPLANE) {
              wrapFramesDesignCommand.eventBusAlertMsg("请选择基准面", "warning")
              break;
            }
            this.params.sDatum.elements = [];
            this.params.sDatum.elements.push(item);
            this.switchQuery("sectionEDatum");
            break;
          case "sectionEDatum":
            if (item.type !== ElementType.DATUMPLANE) {
              wrapFramesDesignCommand.eventBusAlertMsg("请选择基准面", "warning")
              break;
            }
            this.params.eDatum.elements = [];
            this.params.eDatum.elements.push(item);
            this.switchQuery("sectionTrussDatum");
            break;
          case "sectionTrussDatum":
            if (item.type !== ElementType.DATUMPLANE) {
              wrapFramesDesignCommand.eventBusAlertMsg("请选择基准面", "warning")
              break;
            }
            if (!this.params.trussDatums.elements.find(e => e.id === item.id)) {
              this.params.trussDatums.elements.push(item);
            }
            break;
        }
      });
    })
  },
  methods: {
    /**
     * 控制页面展示的高宽
     */
    changePluginContainerHeight() {
      wrapFramesDesignCommand.changePluginContainerHeight(
          {minWidth: 200, maxHeight: this.$el.clientHeight + 10, width: 300});
    },

    //激活的选取框
    switchQuery(name) {
      this.activeQueryName = name;
      for (const key in this.queryListActiveMap) {
        if (key === name) {
          this.queryListActiveMap[key] = 1;
        } else {
          this.queryListActiveMap[key] = 0;
        }
      }
    },
    createWrapFrames() {
      // 复制曲面，使用框占位面切割，需要双向切割，然后感受下加厚
      wrapFramesDesignCommand.modelParams = this.params;
      this.isLoading = true;
      wrapFramesDesignCommand.createTheFrame();
      this.isLoading = false;
    },
    /**
     * 关闭窗口
     */
    close() {
      wrapFramesDesignCommand.closeActiveCmd();
    },
    test() {
      wrapFramesDesignCommand.modelParams = this.params;
      wrapFramesDesignCommand.test();
    }
  }
}
</script>

<template>
  <div class="wrap" v-loading="isLoading"
       :element-loading-text="loadingText">
    <div>选择贴合曲面</div>
    <query-list
        v-model="params.curveFace.elements"
        :active="queryListActiveMap.sectionCurveFace"
        @switchQuery="switchQuery('sectionCurveFace')"
        tipMsg="请选择贴合曲面"/>
    <div>选择框占位面</div>
    <query-list
        v-model="params.frameDatum.elements"
        :active="queryListActiveMap.sectionFrameDatum"
        @switchQuery="switchQuery('sectionFrameDatum')"
        tipMsg="请选择框占位面"/>
    <div>选择包框开始面</div>
    <query-list
        v-model="params.sDatum.elements"
        :active="queryListActiveMap.sectionSDatum"
        @switchQuery="switchQuery('sectionSDatum')"
        tipMsg="请选择包框开始面"/>
    <div>选择包框结束面</div>
    <query-list
        v-model="params.eDatum.elements"
        :active="queryListActiveMap.sectionEDatum"
        @switchQuery="switchQuery('sectionEDatum')"
        tipMsg="请选择包框结束面"/>
    <div>选择长桁占位面</div>
    <query-list
        v-model="params.trussDatums.elements"
        :active="queryListActiveMap.sectionTrussDatum"
        @switchQuery="switchQuery('sectionTrussDatum')"
        tipMsg="请选择长桁占位面"/>

    <div>
      <div>
        <span class="paramName">框缘宽度:</span>
        <el-input type="number" class="input" v-model="params.size.frameWidth"></el-input>
        mm
      </div>
      <div>
        <span class="paramName">框高度:</span>
        <el-input type="number" class="input" v-model="params.size.frameHeight"></el-input>
        mm
      </div>
      <!--      <div>-->
      <!--        <span class="paramName">长桁高度:</span>-->
      <!--        <el-input type="number" class="input" v-model="params.size.trussHeight"></el-input>-->
      <!--        mm-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <span class="paramName">长桁宽度:</span>-->
      <!--        <el-input type="number" class="input" v-model="params.size.trussWidth"></el-input>-->
      <!--        mm-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <span class="paramName">放大系数:</span>-->
      <!--        <el-input type="number" class="input" v-model="params.size.amplifying"></el-input>-->
      <!--        mm-->
      <!--      </div>-->
      <!--      <div>-->
      <!--        <span class="paramName">航向:</span>-->
      <!--        <el-input class="input" v-model="params.size.course"></el-input>-->
      <!--      </div>-->
      <div>
        <span class="paramName">包框厚度:</span>
        <el-input type="number" class="input" v-model="params.size.frameBorder"></el-input>
        mm
      </div>
    </div>
    <div style="margin-top: 10px" class="btn">
      <!--      <el-button @click="test">-->
      <!--        测试-->
      <!--      </el-button>-->
      <el-button type="primary" @click="createWrapFrames">
        生成
      </el-button>
      <el-button @click="close">
        关闭
      </el-button>
    </div>
  </div>
</template>

<style scoped>
.wrap {
  font-size: 12px;
  padding-left: 5px;
}

.paramName {
  width: 60px;
  display: inline-block;
}

.input {
  width: 150px;
}
</style>